<!DOCTYPE html>
<html>
<head>
	<title>弹出框</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<!-- data-placement="left"上下左右均可
			data-trigger="focus"点击空白处可消失
			data-animation="false"取消动画效果
		 -->
		 <!-- 这里应该尽量使用a标签，这里的button实际上不是很合理 -->
		<button type="button" class="btn btn-default js-popover" data-toggle="popover" title="标题" data-content="这里是内容区域" data-placement="bottom" data-trigger="focus">弹出框</button> 
	</div>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- 需要手动进行初始化 -->
<script type="text/javascript">
	$('.js-popover').popover();
	// 直接显示出来
	$('.js-popover').popover('show');
	// 事件:消失后出现弹出框
	$('.js-popover').on('hidden.bs.popover',function(){
		alert('hello');
	})
</script>
</body>
</html>